<template>
	<view class="container">
		<view v-if="PaymentRecords.total">
			<scroll-view 
				class="scroll-one" 
				lower-threshold="10"
				scroll-y="true"
				@scrolltolower="loadMore"
				>
				<view class="hader">
					<view class="lists_item" v-for="(item,index) in PaymentRecords.list" :key="index">
						<view class="item_tit">
							<view class="name">Game currency purchase</view>
							<view class="num">{{item.gold_coin }}GameCoins</view>
						</view>
						<view class="item_time">
							<view class="time">{{ item.create_time }}</view>
							<view class="money">${{ item.money/100 }}</view>
						</view>
					</view>
				</view>   
				<view class="Loading" v-show="showLoading">{{ showtext }}</view>
			</scroll-view>	
		</view>
		<view v-else>
			<image class="bg" src="../../static/images/null.png"></image>
			<view class="null">No recharging records have been found</view>
		</view>
	</view>
</template>

<script>
  import { getrequest, postrequest } from '../../util/api'	
	export default {
		data() { 
			return {
				PaymentRecords:[],//支付记录
				page:1,
				showLoading:false,  //是否正在加载
				showtext:'正在加载...',
			}
		},
		onLoad(){
			console.log('onLoad')
			// 请求支付记录
			this.getpayrecord()
		},
		onShow(){
			// 请求用户数据
		},
		onReady(){
		
		},
		methods: {
			// 请求支付记录
			async getpayrecord(){
				let params = {
					page:this.page,
					size:'10',
				}
				const res = await getrequest('/api/recharge/page_list',params)
				console.log('请求支付记录',res)
				if( res &&res.code == 200){
					this.PaymentRecords = res.data
				}
			},
			loadMore(){
				// 判断是否正在加载中，避免重复触发加载
				if (this.showLoading) {
					return;
				}
				// 显示加载中提示
				this.showLoading = true
				//   计算当前数组有多少对象
				const objectCount = this.PaymentRecords.list.filter(item => typeof item === 'object').length;
				//   如果已加载全部直接返回
				if(objectCount >= this.PaymentRecords.total){
					this.showtext = '没有更多数据了...'
						setTimeout(()=>{
								// 隐藏加载中提示
								this.showLoading = false; 
						},2000)
					return
				}
				//   每次请求页数+1
				this.page = this.page + 1
				// 模拟异步请求数据
				setTimeout(async ()=>{
					// 获取到的新数据
					let params = {
						page:this.page,
						size:10,
					}
					const res = await getrequest('/api/recharge/page_list',params)
					console.log('继续追加支付记录',res)
					if( res &&res.code == 200){
						this.PaymentRecords.list.push(...res.data.list) 
						this.showLoading = false
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgba(246, 246, 246, 1);
		.scroll-one{
			width: 750rpx;
			height: calc(100vh - 10rpx);
			.hader{
				width: 750rpx;
				padding: 20rpx 0 0 0;
				margin: 0 auto;
				// border: 1px solid black;
				.lists_item{
					width: 720rpx;
					height: 170rpx;
					border-radius: 8px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 2rpx 4rpx  rgba(0, 0, 0, 0.25);
					margin: 0 auto;
					margin-bottom: 10rpx;
					.item_tit{
						width: 700rpx;
						height: 40rpx;
						margin: 0rpx 10rpx;
						padding-top: 30rpx;
						font-size: 32rpx;
						line-height: 40rpx;
						display: flex;
						justify-content: space-between;
						.name{
							width: 400rpx;
							height: 40rpx;
							color: rgba(44, 44, 44, 1);
							margin-left: 10rpx;
							// border: 1px solid black;
						}
						.num{
							width: 280rpx;
							height: 40rpx;
							color: rgba(0, 0, 0, 1);
							text-align: right;
							// border: 1px solid black;
						}
					}
					.item_time{
						width: 700rpx;
						height: 40rpx;
						margin: 0rpx 10rpx;
						padding-top: 30rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						display: flex;
						color: rgba(158, 158, 158, 1);
						.time{
							width: 340rpx;
							height: 40rpx;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
						.money{
							width: 340rpx;
							height: 40rpx;
							text-align: right;

						}
					}
				}

			}
			.Loading{
				width: 750rpx;
				height: 60rpx;
				background-color: beige;
				text-align: center;
				line-height: 60rpx;
				// margin-bottom: 200rpx;
			}	
		}

		.bg{
			width: 300rpx;
			height: 200rpx;
			margin: 175rpx 175rpx 0 230rpx;
		}
		.null{
			width: 500rpx;
			height: 40rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: rgba(128, 128, 128, 1);
			margin: 0 auto;
			margin-top: 30rpx;
			text-align: center;
		}
	}
</style>
